TGML Components: <Component>

The Components element is a container element (similar to Group) which defines a reusable group of elements.

Top and Left of Component specifies the position of the component in the parent coordinate system. Component itself establishes a new coordinate system for the contained elements, which means that the upper left corner of Component is the origin (0,0) for the contained elements.

Width and Height specifies the "viewport" (size on screen) of the component. ContentWidth and ContentHeight specify the "viewbox", which is the boundary of the contained elements. If the viewport is different from the viewbox, a scale transformation is applied by the TGML implementation (similar to Stretch="Fill"). For more information, see TGML Document Type Element and Metadata. In other words, resizing a Component has the effect of scaling the content of the Component.

The Clip attribute specifies if the renderer shall clip elements that exceed (are drawn outside) the specified viewbox or not.

When a Component includes Bind or Link elements, the Name of Component will prefix the exposed bind names ("MyComponent.MyBind").

For more information, see TGML Components.

Attribute Type Description

Clip

Bool

Specifies if the content shall be clipped or not.
Default: "True"
Inheritable: No
Animatable: No

ContentHeight

Double

Specifies the viewbox height (height of the content).
Inheritable: No
Animatable: No

ContentWidth

Double

Specifies the viewbox width (width of the content).
Inheritable: No
Animatable: No

Height

Double

The viewport height of the component (height on screen).
Inheritable: No
Animatable: Yes

Left

Double

The x coordinate of the component's upper left corner.
Default: "0"
Inheritable: No
Animatable: Yes

Opacity

Double

A value between 0.0 (transparent) and 1.0 (opaque).
Default: "1.0"
Inheritable: No
Animatable: Yes
Top Double

The y coordinate of the components upper left corner.
Default: "0"
Inheritable: No
Animatable: Yes
Visibility Visibility

Specifies if the element shall be visible or not.
Default: "Visible"
Inheritable: No
Animatable: Yes
Width Double

The viewport width of the component (width on screen).
Inheritable: No
Animatable: Yes

Example:

Copy 
<TGML>
    <Rectangle Left="0.0" Top="55" Width="30" Height="30" Fill="#FFOO00" Stroke="#FF0000" />
    <Polyline Points="30.0,65.0 60.0,5.0 90.0,35.0" Stroke="#FF0000" StrokeWidth="2.0"/>

    <Component Left="150.0" Top="20.0" Width="50.0" Height="50.0" ContentWidth="91" ContentHeight="86">
        <Rectangle Left="0.0" Top="55" Width="30" Height="30" Fill="#FF0000" Stroke="#FF0000" />
        <Polyline Points="30.0,65.0 60.0,5.0 90.0,35.0" Stroke="#FFQOOO" StrokeWidth="2.0"/>
    </Component>
</TGML>

Example on screen: